<template>
  <view>
    <view class="search_box_cont"><uni-search-bar :radius="20" @confirm="getsearch" v-model="searchItem" :focus="true" @input="input" cancelButton="none"></uni-search-bar></view>
    <view class="searchResult" v-if="resultAck.length !== 0">
      <view class="searchResultli" v-for="(item, i) in resultAck" :key="i" @click="resultTo(item.goods_id)">
        <view class="">{{ item.goods_name }}</view>
        <uni-icons type="forward" size="16"></uni-icons>
      </view>
    </view>
    <view class="history" v-else>
      <view class="historyTitle">
        <view class="">搜索历史</view>
        <uni-icons type="trash" size="18" @click="cleanHistory"></uni-icons>
      </view>
      <view class="historyCon">
        <view v-for="(item, i) in historyList" :key="i" @click="historyTo(item)">{{ item }}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchItem: '',
      searchValue: '',
      timer: null, //防抖器
      resultAck: [],
      historyList: []
    }
  },
  methods: {
    input(val) {
      // 先清除防抖器
      clearTimeout(this.timer)
      // 开启防抖器
      this.timer = setTimeout(() => {
        this.searchValue = val
        // console.log(this.searchValue)
        this.getsearch()
      }, 800)
    },
    // 查询搜索建议
    async getsearch() {
      if (this.searchValue === '') {
        return (this.resultAck = [])
      }
      const { data: res } = await uni.$http.get('/api/public/v1/goods/qsearch', { query: this.searchValue })
      if (res.meta.status !== 200) {
        return uni.$showMsg()
      }
      this.resultAck = res.message
      // console.log(res)
    },
    // 点击搜索建议跳转
    resultTo(id) {
      uni.navigateTo({
        url: '/subpkg/good_details/good_details?goods_id=' + id
      })

      this.historyList.push(this.searchValue)
      this.historyList.reverse() //让最近的搜索记录在最前面
      this.historyList = Array.from(new Set(this.historyList)) //去重
      uni.setStorageSync('history', JSON.stringify(this.historyList)) //将搜索记录存在本地里面
    },
    cleanHistory() {
      this.historyList = []
      uni.setStorageSync('history', '[]')
      // uni.showModal({
      //   content: '确认删除历史记录吗？',
      //   success: function(res) {
      //     if (res.confirm) {
      //       this.historyList = []
      //       uni.setStorageSync('history', '[]')
      //     } else if (res.cancel) {
      //       uni.showToast({
      //         title: '取消删除',
      //         icon: 'none',
      //         duration: 2000
      //       })
      //     }
      //   }
      // })
    },
    historyTo(item) {
      this.input(item)
      this.searchItem = item
    }
  },
  onLoad() {
    this.historyList = JSON.parse(uni.getStorageSync('history') || '[]')
  }
}
</script>

<style lang="scss">
.searchResultli {
  height: 90rpx;
  line-height: 90rpx;
  font-size: 13px;
  padding-left: 10rpx;
  border-bottom: 2rpx solid #ccc;
  display: flex;
  justify-content: space-between;
  view {
    white-space: nowrap; // 文字不允许换行（单行文本）
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.historyTitle {
  height: 90rpx;
  line-height: 90rpx;
  display: flex;
  justify-content: space-between;
  padding: 0 10rpx;
  position: relative;
  &::after {
    content: ' ';
    width: 740rpx;
    height: 2rpx;
    background-color: #ccc;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
  }
}
.historyCon {
  display: flex;
  margin-top: 12rpx;
  margin-left: 12rpx;
  view {
    width: 100rpx;
    height: 80rpx;
    background-color: #fff;
    border-radius: 12rpx;
    text-align: center;
    line-height: 80rpx;
    margin-right: 12rpx;
  }
}
</style>
